<template>
  <div class="search">
    <div class="top-bar">
      <div class="search-ipt">
        <div class="ipt-img">
          <img
            src="	https://yanxuan.nosdn.127.net/15954074352382011.png"
            alt=""
          />
        </div>
        <input @keyup.enter="addHistoryList" @input="getAutoKeyword" v-model="enterNow" type="text" placeholder="茅台酒" />
        <div class="close">
          <CircleCloseFilled v-if="enterNow" color="#777" width="20px" @click="clearInput"/>
        </div>
      </div>
      <span @click="$router.go(-1)" class="cancel">取消</span>
    </div>

    <!-- 点击输入框输入时的提示 -->
    <div >
    <div v-if="searchStore.autoCompleteList.length" class="autoComplete">
      <div class="auto-item" v-for="item in searchStore.autoCompleteList" :key="item">
        <span class="item-info">{{ item }}</span>
        <div class="icon">
          <ArrowRight color="#777" width="20px" />
        </div>
      </div>
      
    </div>

    <!-- 搜索框下面的记录 -->
    <div v-else class="suggest">
      <div v-show="historyList.length" class="suggest-item">
        <div class="item-head">
            <span>历史记录</span>
            <div @click="deleteHistoryList" class="tubiao">
                <Delete  width="20px" color="#777" />
            </div>
        </div>
        <div  class="tag-list">
            <div class="tag" v-for="item in historyList" >{{ item }}</div>          
        </div>
      </div>
      <div class="suggest-item">
        <div class="item-head">
            <span>热门搜索</span>
        </div>
        <div class="tag-list">
            <div class="tag" @click="" v-for="item in searchStore.hotKeywordList" :key="item">{{ item }}</div>           
        </div>
      </div>
    </div>
</div>
    <!-- 进入列表页后的弹框 -->
    <div v-show="categoryList.length" class="search-bar">
      <!-- 选择条 -->
      <div class="search-tabbar">
        <div class="zonghe" :class="{active:showSortOrSelect===0}" @click="showSortOrSelect = 0">综合</div>
        <div class="jiage">
          <span class="price" :class="{active:showSortOrSelect===1}" @click="showSortOrSelect = 1">价格</span>
          <div class="icon"></div>
        </div>
        <div class="fenlei" :class="{active:showSortOrSelect===2}" @click="showSortOrSelect = 2">分类</div>
      </div>
      <!-- 弹出的两个框 -->
      <div class="selectList">
        <!-- 排序框 -->
        <div class="select-sort" v-show="showSortOrSelect===1">
          <div class="form">
            <div class="form-group">
              <label class="label">筛选</label>
              <input type="number" class="ipt active" placeholder="最低价" />
              <div class="line"></div>
              <input type="number" class="ipt" placeholder="最高价" />
            </div>
            <div class="form-group">
              <label class="label">排序</label>
              <button class="smallBtn">从低到高</button>
              <button class="smallBtn active">从高到低</button>
            </div>
          </div>
          <div class="btn-group">
            <button class="btn cancel">取消</button>
            <button class="btn ok">确定</button>
          </div>
        </div>
        <!-- 分类框 -->
        <div class="select-block" v-show="showSortOrSelect===2">
            <div class="select-card">
                <div class="item active">全部</div>
                <div class="item">居家生活</div>
                <div class="item">家电</div>
                <div class="item active">全部</div>
                <div class="item">生活</div>
                <div class="item">家电</div>
            </div>
        </div>
      </div>
    </div>
    
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
  name: 'Search',
});
</script>

<script lang="ts" setup>

import { Delete, CircleCloseFilled, ArrowRight } from '@element-plus/icons-vue';
import { ref,onMounted } from 'vue';
import {useSearchStore} from '@/stores/search'
const searchStore = useSearchStore()
const enterNow = ref('')
const historyList = ref<string[]>([])
const categoryList = ref<string[]>([])
const showSortOrSelect = ref(0)
//删除历史
function deleteHistoryList(){
    historyList.value.length = 0
}
//添加历史记录并请求列表
function addHistoryList(e:any){
    historyList.value.push(e.target.value as any)
}
//清除输入框
function clearInput(){
    enterNow.value = ''
}
//输入时自动提示
function getAutoKeyword(e: any){
  const data = {
    keywordPrefix:e.target.value
  }
  searchStore.getAutoCompleteList(data)
}
onMounted(()=>{
   searchStore.getkeyWordList()
})
</script>

<style scoped>
/* 搜索页样式 */
.search {
  width: 100%;
  height: 657px;
}
.top-bar {
  width: 100%;
  height: 44px;
  padding: 0 15px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: white;
  border-bottom: 1px solid #ededed;
}
.search-ipt {
  width: 282px;
  height: 28px;
  padding: 0 10px;
  background-color: #ededed;
  display: flex;
  align-items: center;
  border-radius: 5px;
}
.search-ipt input {
  border: none;
  background-color: #ededed;
  font-size: 14px;
  flex: 1;
}
.ipt-img {
  width: 14px;
  height: 14px;
  margin-right: 8px;
}
.ipt-img img {
  width: 100%;
  height: 100%;
}
.cancel {
  font-size: 14px;
}
/* 记录样式 */
.suggest {
  width: 100%;
  margin-top: 44px;
}
.suggest-item {
  width: 345px;
  height: 127px;
  padding: 0 15px 15px;
  margin-bottom: 10px;
  background-color: #fff;
}
.item-head {
  display: flex;
  height: 45px;
  align-items: center;
  justify-content: space-between;
}
.item-head span {
  font-size: 16px;
  color: #777;
}
.tag-list {
  width: 100%;
  height: 82px;
  display: flex;
  flex-wrap: wrap;
}
.tag {
  height: 23px;
  line-height: 23px;
  border: 1px solid #777;
  border-radius: 5px;
  padding: 0 7.5px;
  margin: 0 16px 16px 0;
}
/* 自动提示样式 */
.autoComplete {
  width: 360px;
  padding-left: 15px;
}
.auto-item {
  height: 46px;
  box-sizing: border-box;
  margin-bottom: 6px;
  border-bottom: 1px solid hsl(0, 15%, 77%);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.icon {
  width: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.item-info {
  font-size: 14px;
}
/* 搜索bar样式 */
.search-tabbar {
  height: 40px;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  background-color: #fafafa;
}
.jiage {
  display: flex;
  align-items: center;
}
.jiage .icon {
  width: 8px;
  height: 11px;
  margin-left: 4px;
  background-position: 0px -114px;
  background-size: 211px 144px;
  background-image: url(https://yanxuan-static.nosdn.127.net/hxm/yanxuan-mall-wap/assets/img/normal-1d164e96ac8a5c0e7ac39af8b1982304.png);
}

/* 弹框样式 */
.selectList{
    font-size: 14px;
}
.select-sort .form {
  height: 76px;
  padding: 20px 15px 0;
  margin-bottom: 20px;
}
.form .form-group{
    height:28px;
    display: flex;
    
    align-items: center;
    margin-bottom: 20px;
}
.form-group .label{
    margin-right: 12px;
}
.form-group .ipt{
    width: 132px;
    height:100%;
    text-align: center;
    border: 1px solid #7f7f7f;
}
.active {
  border-color: #dd1a21 !important;
  color: #dd1a21;
}
.form-group .line{
    width:11px;
    height: 1px;
    margin: 0 11px;
    background-color: #7f7f7f;
}
.form-group .smallBtn{
    width: 102px;
    height: 100%;
    margin-right: 12px;
    background-color: white;
    border: 1px solid #7f7f7f;
}
.btn-group .btn{
    border: none;
    width: 50%;
    height:52px;
    box-sizing: border-box;
    text-align: center;
    line-height: 52px;
    border-top: 1px solid #7f7f7f;
    background-color: white;
}
.btn.cancel{
    border-right: 1px solid #7f7f7f;
}
.ok{
    color:#dd1a21
}
/* 分类框样式 */
.select-card{
    padding:20px 32.5px;
}
.select-card .item{
    height:27px;
    border:1px solid #7f7f7f;
    line-height: 27px;
    text-align: center;
    display: inline-block;
    padding:0 9px;
    margin:0 20px 20px 0;
}
</style>
